import { SetupContext } from 'vue'

interface ListItem {
  id: number
  name: string
}

interface Props {
  list: ListItem[]
}

interface EmitsEvent {
  itemClick: (item: ListItem) => void
}

export const List = (props: Props, content: SetupContext<EmitsEvent>) => {
  const data = '具名插槽传递的参数'

  // 核心
  return (
    <div>
      <div>
        {props.list.map((item) => {
          return (
            <div onClick={() => content.emit('itemClick', item)}>
              {item.name}
            </div>
          )
        })}
      </div>
      <span>定义默认插槽：</span>
      {/* <div>{content.slots.default?.()}</div> */}
      {/* 定义具名插槽 footer */}
      <div>{content.slots.footer?.({ data: data })}</div>
    </div>
  )
}
